<template>
  <div class="community">
    <!--  /index/community -->
    <header>
      <Search />
    </header>

    <div class="community-list">
      <van-tabs @click="hadelclick">
        <van-tab
          v-for="(item, index) in lists"
          :key="index"
          :title="item.title"
          class="community-options"
        >
          <div
            class="community-wrap"
            v-for="(v, index) in qarr"
            :key="index"
            @click="gotomsg(v)"
          >
            <div class="community-user">
              <div class="user-img">
                <img src="../../../public/img/message-2.png" alt="" />
              </div>
              <div class="user-name">{{ v.userId }}</div>
            </div>
            <p class="community-title">
              {{ v.qtitle }}
            </p>
            <div class="community-content">
              <p>{{ v.qcontext }}</p>
            </div>
            <div class="community-reply">
              <van-icon name="comment-o" size="18px">
                {{ v.queAnswers.length || 0 }}</van-icon
              >
              <van-icon name="like-o" size="18px">
                {{ v.realVotes || 0 }}</van-icon
              >
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <footer>
      <LogReg />
    </footer>
  </div>
</template>

<script>
// import listcounts from "../../../public/community/community.json";
import Search from "../../components/public/Search.vue";
import LogReg from "../LogReg.vue";
import { mapState, mapActions } from "vuex";
export default {
  components: { Search, LogReg },

  async created() {
    await this.getCommunityList();
    // console.log(this.CommunityList, "5");
    let arr = [];
    this.CommunityList.forEach((val) => {
      if (val.typeId == this.index) {
        arr.push(val);
      }
    });
    this.qarr = [...arr];

    // console.log(arr, "23");
  },

  mounted() {},
  computed: {
    ...mapState({ CommunityList: (state) => state.message.CommunityList }),
  },
  methods: {
    ...mapActions(["getCommunityList"]),
    hadelclick(e) {
      // console.log(e);
      this.index = ++e;
      let arr = [];
      this.CommunityList.forEach((val) => {
        if (val.typeId == this.index) {
          arr.push(val);
        }
      });
      // console.log(arr, "1");
      this.qarr = [...arr];
    },
    //跳转
    gotomsg(v) {
      this.$router.push({
        path: "/questiondetail/" + v.qid,
      });
      localStorage.setItem("qarr", JSON.stringify(v));
    },
  },
  data() {
    return {
      index: 1,
      qarr: [],
      lists: [
        {
          title: "推荐",
          typeId: "01",
        },
        {
          title: "饮食喂养",
          typeId: "02",
        },
        {
          title: "待解答",
          typeId: "03",
        },
        {
          title: "疾病互助",
          typeId: "04",
        },
        {
          title: "新手养宠",
          typeId: "05",
        },
      ],
    };
  },
};
</script>
<style lang="less">
.community-list {
  background: #fff;
}
.community {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 50px;
  background: #f7f7f7;

  header {
    background: #fff;
  }
  .community-options {
    width: 100%;
    position: fixed;
    top: 120px;
    left: 0px;
    right: 0px;
    bottom: 50px;
    overflow: auto;
  }

  .van-tabs--line .van-tabs__wrap {
    box-shadow: 0px 6px 8px #888888;
    padding: 10px;
  }
  .community-wrap {
    padding: 10px;
    width: 100%;
    background: #fff;
    margin: 10px 0;

    .community-user {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .user-img {
        width: 60px;
        height: 60px;
        margin-right: 20px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .user-name {
        color: #333;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .community-title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      padding: 10px;
    }
    .community-content {
      font-size: 14px;
      color: #5c5c5c;
      padding-right: 10px;
      p {
        // overflow: hidden; /*超出部分隐藏*/
        // text-overflow: ellipsis; /* 超出部分显示省略号 */
        // white-space: nowrap; /*规定段落中的文本不进行换行 */
        // width: 100%; /*需要配合宽度来使用*/
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 20px;
      }
    }
    .community-reply {
      color: #b1b1b1;
      text-align: right;
      padding: 20px;
    }
  }
}
</style>
